import React from 'react';
import './programConfigDetail.scss';
import AreaData from '../../../component/areaData/areaData.js'; //地址库
import utils from '../../../utils/utils';
import cookie from 'react-cookies';
import BMap from 'BMap';
import moment from 'moment';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List,  Tabs, Row, Col,Select,DatePicker,Table,Button,Input,Descriptions,Image, Timeline, Upload, Icon, message, Form } from 'antd';
import {getProjectInfoByProjectId,getProjectStateInfoByProjectId,getProjectEquipmentInfoById,getSaasInfo,getProjectLog, updProject, exportEquipmentInfo, fileDownload} from '../../../api/hardwareCenter'
import { LoadingOutlined, PlusOutlined ,UploadOutlined,CloudDownloadOutlined} from '@ant-design/icons';
import { fileUpload } from "../../../api/extra";
import {approve} from '../../../api/deviceLibrary'
import { apply } from 'file-loader';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Column } = Table;

class programConfigDetail extends React.Component {
    FormDate = React.createRef();
    constructor(props) {
        super(props);
        this.state = {
            id:'',
            RangePickerVal:[],
            gateType:'',
            keyWord:'',
            changeLogData:[],
            dataSource : [
            {
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号',
            },
            { 
                key: '2',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
            },
            ],
            project_id:this.getUrlSearch('id'),
            projectData:{},
          
            activeChange:'',
            loading:false,
            processData:{},
            threedata:[],
            saasData:{},
            activePro:'',
            fileList:[],
            fileList2:[],
            fileList3:[],
            start_time:'',
            end_time:'',
            RangePickerVal2:[],
            end_time_dev:'',
            start_time_dev:'',
            maintenance_end_date:'',
            defaultActiveKey:'1',
            apply_type:'',
            threedataSelf:[],
            down_url:'',
            status:''

          
        }
    }

    componentDidMount() {
            this.setState({
                project_id:this.getUrlSearch('id'),
                apply_type:this.getUrlSearch('type'),
                status:this.getUrlSearch('state')
            },()=>{
                this.getProjectInfoByProjectId()
                this.getProjectLog()
                this.getProjectStateInfoByProjectId()
                this.getProjectEquipmentInfoById()
                this.getSaasInfo()
            })
    
        
       
    }

    getUrlSearch = (name) => {
        // 未传参，返回空
        if (!name) return null;
        // 查询参数：先通过search取值，如果取不到就通过hash来取
        var after = window.location.search;
        after = after.substr(1) || window.location.hash.split('?')[1];
        // 地址栏URL没有查询参数，返回空
        if (!after) return null;
        // 如果查询参数中没有"name"，返回空
        if (after.indexOf(name) === -1) return null;
    
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        // 当地址栏参数存在中文时，需要解码，不然会乱码
        var r = decodeURI(after).match(reg);
        // 如果url中"name"没有值，返回空
        if (!r) return null;
    
        return r[2];
    }
  
    componentDidUpdate(prevProps){
        if(prevProps.location.search!==this.props.location.search){
            this.getProjectInfoByProjectId()
            this.getProjectLog()
            this.getProjectStateInfoByProjectId()
            this.getProjectEquipmentInfoById()
            this.getSaasInfo()
        }
    }

    static getDerivedStateFromProps(props, state) {
        if (props.location.search !== state.project_id) {
            return {
                state: props.location.search 
            }
        }

        
        return null

    
    }

    
    // shouldComponentUpdate(nextProps, nextState) {
    //     if (this.props.location.search !== nextProps.location.search) {
            
    //         return true;
    //     }
    //     if(this.state.project_id !== nextState.project_id){
    //         return true
    //     }
    //     return false

    
    // }
    
    // componentDidUpdate(){
    //     let _this=this
    //     console.log('componentDidUpdate',this.props.location.search.split('=')[1])
    //     _this.getProjectInfoByProjectId()
    //     _this.getProjectLog()
    // }
    // 获取详情
    getProjectInfoByProjectId = () => {

        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
        console.log('获取详情的参数',post_data)
        getProjectInfoByProjectId(post_data).then(res => {
            if(res.code == 0){
                
                this.setState({
                    projectData:res.data
                })
            }
        })
    }
    // 获取项目日志
    getProjectLog = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
        getProjectLog(post_data).then(res => {
            if(res.code == 0){
                
                this.setState({
                    changeLogData:res.data
                })
            }
        })
    }
    // 项目状态
    getProjectStateInfoByProjectId = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
        getProjectStateInfoByProjectId(post_data).then(res => {
            if(res.code == 0){
                console.log('项目状态',res)
                this.setState({
                    processData:res.data,
                    start_time:res.data.construct_start_time?res.data.construct_start_time:'',
                    end_time:res.data.construct_end_time?res.data.construct_end_time:'',
                    start_time_dev:res.data.software_dev_start_time?res.data.software_dev_start_time:'',
                    end_time_dev:res.data.software_dev_end_time?res.data.software_dev_end_time:'',
                    activePro:res.data.project_phase?res.data.project_phase:'',
                    maintenance_end_date:res.data.maintenance_end_date
                })
            }
        })
    }
    // 设备配备
    getProjectEquipmentInfoById = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
        getProjectEquipmentInfoById(post_data).then(res => {
            if(res.code == 0){
                console.log('设备配备',res)
                let Stasdevice = []
                let selfDevice = []
                res.data.map((item,index) => {
                    if(item.eq_type == 1){
                        Stasdevice.push(item,)
                    }else{
                        selfDevice.push(item)
                    }
                })
                this.setState({
                    threedata:Stasdevice,
                    threedataSelf:selfDevice
                })
            }
        })
    }
    // saas
    getSaasInfo = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
        getSaasInfo(post_data).then(res => {
            if(res.code == 0){
                console.log('saas',res)
                this.setState({
                    saasData:res.data
                })
            }
        })
    }
    // 点击tabs
    callback = (key) => {
        if(key==1){
            this.getProjectInfoByProjectId()
            this.getProjectLog()
        }else if(key == 2){
            this.getProjectStateInfoByProjectId()
        }else if(key==3){
            this.getProjectEquipmentInfoById()
            this.getSaasInfo()
        }
    }

   
    changeInfo = (key) => {
        const {processData} = this.state
        console.log('点击信息维护',key)
        this.setState({
            activeChange:key,
            fileList:processData.infrastructure_img_ids,
            fileList2:processData.construct_contract_img_ids,
            fileList3:processData.collect_img_ids,
            start_time: processData.construct_start_time?processData.construct_start_time:'',
            end_time: processData.construct_end_time? processData.construct_end_time:'',
            start_time_dev: processData.software_dev_start_time?processData.software_dev_start_time:'',
            end_time_dev: processData.software_dev_end_time?processData.software_dev_end_time:'',
            maintenance_end_date:processData.maintenance_end_date
        })

        
       
    }


  
    // 
    uploadHeadImg = (info) => {
        const { fileList } = this.state;
        // console.log('info',info.file)
        let post_data = {
          auth_token: cookie.load("station_console_setting_web_login").auth_token,
          file: info.file,
          file_type: 1,
        };
        console.log(post_data);
        fileUpload(post_data).then((res) => {
          console.log(res);
          fileList.push({
            url: res.data.full_url,
            status: "done",
            id: res.data.attach_id,
          });
    
          this.setState(
            {
              fileList,
            },
            () => {
              console.log(fileList);
            }
          );
        });
    };
    // 
    // remove-file
    removefile = (file) => {
        const {fileList} = this.state

        fileList.forEach((item, index) => {
            if (file.id == item.id) {
                fileList.splice(index, 1);
            }
        });
        this.setState({
            fileList: fileList,
        })
    }; 
    handleCancel = () => this.setState({ previewVisible: false });
    
    // 
    handlePreview = async (file) => {
        console.log(file);
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj);
        }
    
        this.setState({
          previewImage: file.url || file.preview,
          previewVisible: true,
          previewTitle:
            file.name || file.url.substring(file.url.lastIndexOf("/") + 1),
        });
    };

    // 
    getBase64 = (file) => {
        console.log("getbase64", file);
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = (error) => reject(error);
        });
    };

    beforeUpload = (file) => {
        const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
        if (!isJpgOrPng) {
          message.error("You can only upload JPG/PNG file!");
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error("Image must smaller than 2MB!");
        }
        return isJpgOrPng && isLt2M;
      };

    //   施工合同
    uploadHeadImg2 = (info) => {
        const { fileList2 } = this.state;
    
        let post_data = {
          auth_token: cookie.load("station_console_setting_web_login").auth_token,
          file: info.file,
          file_type: 2,
        };
        console.log(post_data);
        fileUpload(post_data).then((res) => {
          console.log(res);
          fileList2.push({
            name: info.file.name,
            url: res.data.full_url,
            status: "done",
            id: res.data.attach_id,
          });
    
          this.setState(
            {
              fileList2,
            },
            () => {
              info.onSuccess();
              info.file.id = res.data.attach_id;
              console.log(fileList2);
              console.log("info", info.file);
            }
          );
        });
      };
      beforeUpload2 = (file) => {
        const fType = file.name.slice(file.name.lastIndexOf(".") + 1);
        const isXLS =
          fType === "xls" ||
          fType === "xlsx" ||
          fType === "docx" ||
          fType === "pdf" ||
          fType === "doc";
        if (!isXLS) {
          message.error("请选择 xls、xlsx、docx、pdf、doc 类型的文件");
        }
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isLt10M) {
          message.error("请上传小于10MB的文件!");
        }
        return isXLS && isLt10M;
      };
      // remove-file
      removefile2 = (file) => {
        const {fileList2} = this.state
    
        fileList2.forEach((item, index) => {
            if (file.id == item.id) {
                fileList2.splice(index, 1);
            }
        });
        this.setState({
            fileList2: fileList2,
        })
      };
    //   file3
      uploadHeadImg3 = (info) => {
        const { fileList3 } = this.state;
        // console.log('info',info.file)
        let post_data = {
          auth_token: cookie.load("station_console_setting_web_login").auth_token,
          file: info.file,
          file_type: 1,
        };
        console.log(post_data);
        fileUpload(post_data).then((res) => {
          console.log(res);
          fileList3.push({
            url: res.data.full_url,
            status: "done",
            id: res.data.attach_id,
          });
    
          this.setState(
            {
              fileList3,
            },
            () => {
              console.log(fileList3);
            }
          );
        });
      };
      removefile3 = (file) => {
        const {fileList3} = this.state
    
        fileList3.forEach((item, index) => {
            if (file.id == item.id) {
                fileList3.splice(index, 1);
            }
        });
        this.setState({
            fileList3: fileList3,
        })
      };
      handleCancel = () => this.setState({ previewVisible: false });
    
      handlePreview3 = async (file) => {
        console.log(file);
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj);
        }
    
        this.setState({
          previewImage: file.url || file.preview,
          previewVisible: true,
          previewTitle:
            file.name || file.url.substring(file.url.lastIndexOf("/") + 1),
        });
      };

      //时间周期筛选
    onChangeDate = (val, valString) => {
        const start_time = valString[0];
        const end_time = valString[1];
        this.setState({ RangePickerVal: val, start_time, end_time }, () => {
        console.log(start_time, end_time);
        });
    };

    onChangeDate2 = (val, valString) => {
        const start_time_dev = valString[0];
        const end_time_dev = valString[1];
        this.setState(
          { RangePickerVal2: val, start_time_dev, end_time_dev },
          () => {
            console.log(start_time_dev, end_time_dev);
          }
        );
      };
    // 保存修改
    saveUpd = () => {
        const {activeChange} = this.state
        console.log(activeChange)
        if(activeChange == 1){
            let post_data = {
                'auth_token': cookie.load("station_console_setting_web_login").auth_token,
                'infrastructure_img_ids' : JSON.stringify(this.state.fileList),
                'project_id':this.getUrlSearch('id'),
                'project_phase':1
            }
            console.log('修改后的active1',post_data)
            updProject(post_data).then(res => {
                console.log('修改1 ',res)
                if(res.code == 0){
                    message.success('修改成功',2,()=>{
                        this.getProjectStateInfoByProjectId()
                        this.setState({
                            activeChange:0
                        })
                    })
                }
            })
            
        }else if(activeChange == 2){
            let post_data = {
                'auth_token': cookie.load("station_console_setting_web_login").auth_token,
                'construct_start_time' : this.state.start_time,
                'construct_end_time': this.state.end_time,
                'construct_contract_img_ids': JSON.stringify(this.state.fileList2),
                'collect_img_ids' :JSON.stringify(this.state.fileList3),
                'project_id':this.getUrlSearch('id'),
                'project_phase':2

            }
            console.log('修改后的active2',post_data)
            updProject(post_data).then(res => {
                console.log('修改2 ',res)
                if(res.code == 0){
                    message.success('修改成功',2,()=>{
                        this.getProjectStateInfoByProjectId()
                        this.setState({
                            activeChange:0
                        })
                    })
                }
            })
        }else if(activeChange == 3){
            let post_data = {
                'auth_token': cookie.load("station_console_setting_web_login").auth_token,
                'software_dev_start_time' : this.state.start_time_dev,
                'software_dev_end_time' : this.state.end_time_dev,
                'project_id':this.getUrlSearch('id'),
                'project_phase':3
            }
            console.log('修改后的active3',post_data)
            updProject(post_data).then(res => {
                console.log('修改3 ',res)
                if(res.code == 0){
                    message.success('修改成功',2,()=>{
                        this.getProjectStateInfoByProjectId()
                        this.setState({
                            activeChange:0
                        })
                    })
                }
            })
        }else if(activeChange == 4){
            let post_data = {
                'auth_token': cookie.load("station_console_setting_web_login").auth_token,
                'maintenance_end_date' : this.state.maintenance_end_date,
                'project_id':this.getUrlSearch('id'),
                'project_phase':4
            }
            console.log('修改后的active4',post_data)
            updProject(post_data).then(res => {
                console.log('修改4 ',res)
                if(res.code == 0){
                    message.success('修改成功',2,()=>{
                        this.getProjectStateInfoByProjectId()
                        this.setState({
                            activeChange:0
                        })
                    })
                }
            })
        }
        
    }
    onChangeEnd = (date, dateString) => {
        this.setState({
            maintenance_end_date:dateString
        })
    }

    // 通过
    toDoDec = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'apply_type':'2',
            'id':this.props.location.search.split('=')[1],
            'type':1,//通过
        }
        approve(post_data).then(res=>{
            if(res.code == 0){
                message.success('项目通过成功！',2,()=>{
                    window.location.href='/index/myWork/myReview'
                })
            }else{
                message.error('操作失败')
            }
            
        })
    }

    // 不通过
    toDoDecRefuse = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'apply_type':'2',
            'id':this.props.location.search.split('=')[1],
            'type':2,//bu通过
        }
        approve(post_data).then(res=>{
            if(res.code==0){
                message.success('项目已拒绝通过！',2,()=>{
                    window.location.href='/index/myWork/myReview'
                })
            }else{
                message.error('操作失败')
            }
        })
    }
    // 下载
    erportBtnDan = () => {
       
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
      
        exportEquipmentInfo(post_data).then(res=>{
            if (res.code == 0) {
                let f = res.data.download_url
                // window.open(process.env.API_URL + '/internal_public/attach/fileDownload' + res.data.download_url)
                if(f) {
                    window.open(process.env.API_URL + '/internal_public/attach/fileDownload' + '?f=' +res.data.download_url)
                    message.success('导出成功')
                } else {
                    message.error('导出失败')
                }
            }else{
                message.error('下载失败',2)
            }
        })
    }
    // wwwwww
    
    // 下载
    modalExport = () => {
        
        // const { setIntervalTime } = this.state;
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'f':this.state.down_url
        }
       
        fileDownload(post_data).then(res => {
            console.log(res)
            if (res.report_url == '') {
                message.warn('正在下载设备清单，稍后会自动下载，请勿重复点击下载。', 0)
                let times = 0;
                this.state.setIntervalTime = setInterval(() => {
                    times++;
                    if (times == 100) {
                        clearInterval(this.state.setIntervalTime);
                        message.destroy()
                        message.error('下载失败', 2)
                    } else {
                        this.uploadBillTime()
                    }

                }, 1000)
            } else {
                window.open(res.report_url)
               
            }

            window.open(res.report_url)
            this.setState({
                confirmModal: false
            })
        })

    }

    // uploadBillTime = () => {
    //     let _this = this;
    //     let post_data = {
    //         'auth_token':cookie.load('station_console_setting_web_login').auth_token,
    //         'f':this.state.down_url
            
    //     }
    //     fileDownload(post_data).then(res => {
    //         if (res.report_url == '') {

    //         } else {
    //             clearInterval(this.state.setIntervalTime);
    //             message.destroy()
    //             window.open(res.report_url)
                
    //         }

    //     })
    // }
    goback=()=>{
        // 我的申报和我的审批要区分 sp
        if(this.getUrlSearch('type') == 3){
          
                window.location.href=`/index/myWork/myDeclare`
          
        } else if(this.getUrlSearch('type') == 2) {
            window.location.href=`/index/myWork/myReview`
        }
    }
    render() {
        const uploadButton = (
            <div>
                {/* <Icon type={this.state.loading ? 'loading' : 'plus'} /> */}
                <div className="ant-upload-text">+</div>
            </div>
        );
        const { imageUrl } = this.state;
        const { id,
            RangePickerVal,
            gateType,
            keyWord,
            dataSource,
            columns ,
            projectData,
            changeLogData,
            defaultActiveKey,
            activeChange,
            loading,
            processData,
            threedata,
            threedataSelf,
            saasData,
            activePro,
            fileList,
            fileList2,
            fileList3,
            start_time,
            end_time,
            start_time_dev,
            end_time_dev,
            RangePickerVal2,
            maintenance_end_date,
            apply_type,
            status

        } = this.state;
        console.log('要打印的数据',this.FormDate)
        return (
            <Row className="detailCon-pro">
                <Row className="detailbox-pro">
                    <Col>
                    {this.getUrlSearch('type')?<Button type='primary' style={{height:40,width:80,textAlign:'center'}} onClick={this.goback}>返回</Button>:''}
                    <Tabs defaultActiveKey={defaultActiveKey}  onChange={this.callback.bind(this)} >
                        <TabPane tab={<span className="tabTit">基本信息</span>} key="1">
                            <Row>
                               
                                   <div className="topname">
                                        <span className="first">{projectData&&projectData.project_name}</span>
                                        <span className="sec">{projectData&&projectData.lane_count}车道 - {projectData.lane_in_count}进{projectData.lane_out_count}出</span>
                                        <span>{projectData.project_phase==1?'厂区建设阶段':projectData.project_phase==2?'道闸施工阶段':projectData.project_phase==3?'软件调试阶段':projectData.project_phase==4?'维保期内':'服务到期'}</span>
                                   </div>
                                    
                            </Row>
                            <Row className="Info">
                                <Descriptions  column={1}>
                                    <Descriptions.Item label="项目公司">{projectData.project_company}</Descriptions.Item>
                                    <Descriptions.Item label="项目地址">{projectData.p_province}{projectData.p_city}{projectData.p_area}{projectData.p_address}</Descriptions.Item>
                                    <Descriptions.Item label="签约时间">{projectData.sign_time}</Descriptions.Item>
                                    <Descriptions.Item label="项目IP" >
                                        {projectData.project_ip&&projectData.project_ip.map((item,index)=>(
                                            <p style={{display:'block',marginLeft:'15px'}}>IP{index+1}:{item.ip}</p>
                                        ))}
                                    </Descriptions.Item>
                                    <Descriptions.Item label="项目创建人">{projectData.create_u_name}</Descriptions.Item>
                                    <Descriptions.Item label="项目复核人">{projectData.review_u_name}</Descriptions.Item>
                                    <Descriptions.Item label="厂区图"  >
                                        {
                                            projectData.img_url && projectData.img_url.map((item,index)=>(
                                                <Image
                                                    width={100}
                                                    src={item.url}
                                                    style={{margin:'10px'}}
                                                />
                                            ))
                                        }
                                    
                                    </Descriptions.Item>
                                    <Descriptions.Item label="合同附件">
                                        {
                                            projectData.contranct_img_url && projectData.contranct_img_url.map((item,index)=>(
                                                <a href={item.url} style={{ marginRight:'10px',display:'block'}}>{item.name}</a>
                                            ))
                                        }
                                    </Descriptions.Item>
                                </Descriptions>
                            </Row>
                            <Row className="changeLog">
                                <div className="tipss">
                                    <span className="blue"></span>
                                    <span>变更日志</span>
                                   
                                </div>
                                <Col span={24}>
                                    <Table dataSource={changeLogData} pagination={false}>
                                        <Column title="行为" dataIndex="name" width='150px' key='1' 
                                            render={(text, record) => (
                                                <div className="address-item">
                                                    {record.type==1?'项目创建':record.type==2?'项目状态维护':'项目审核'}
                                                </div>
                                            )}
                                        />
                                        <Column title="变更前" dataIndex="address" width='350px' key='2'
                                            render={(text,record)=>{
                                                return <div>
                                                            <p>{record.before_construct_time?`施工时间：${record.before_construct_time}`:''}</p>
                                                            <p>{record.before_software_dev_time?`软件开发时间：${record.before_software_dev_time}`:''}</p>
                                                            <p>{record.before_maintenance_end_date?`维保结束时间：${record.before_maintenance_end_date}`:''}</p>
                                                            
                                                            <p> 
                                                                {record.before_collect_img_ids?record.before_collect_img_ids.map((item,index)=>( 
                                                                    <div>采集图片：
                                                                        <Image src={item.url} style={{margin:0}} width={20} /> 
                                                                    
                                                                    </div>
                                                                )):null}
                                                            </p>
                                                            <p>
                                                              
                                                                {record.before_construct_contract_img_ids?
                                                                 record.before_construct_contract_img_ids.map((item,index)=>( 
                                                                    <div>
                                                                        施工合同：
                                                                        <a href={item.url} style={{display:'block',height:'20px'}} >{item.name}</a>
                                                                    </div>
                                                                    
                                                                )):null}
                                                            </p>
                                                            <p>
                                                                {record.before_infrastructure_img_ids?
                                                                record.before_infrastructure_img_ids.map((item,index)=>(
                                                                    <div>
                                                                        基建图片：
                                                                        <Image src={item.url}  style={{margin:0}} width={20}  />
                                                                    </div>
                                                                )):null}
                                                            </p>
                                                        </div>
                                            }}
                                             />
                                        <Column title="变更后" dataIndex="address" width='350px' key='2'
                                            render={(text,record)=>{
                                                return <div>
                                                            <p>{record.after_construct_time?`施工时间：${record.after_construct_time}`:''}</p>
                                                            <p>{record.after_software_dev_time?`软件开发时间：${record.after_software_dev_time}`:''}</p>
                                                            <p>{record.after_maintenance_end_date?`维保结束时间：${record.after_maintenance_end_date}`:''}</p>
                                                            
                                                            <p> 
                                                                {record.after_collect_img_ids?record.after_collect_img_ids.map((item,index)=>( 
                                                                    
                                                                    <div>
                                                                        采集图片：
                                                                        <Image src={item.url} style={{margin:0}}  width={20} /> 
                                                                    </div>
                                                                    
                                                                )):null}
                                                            </p>
                                                            <p>
                                                                
                                                                {record.after_construct_contract_img_ids?record.after_construct_contract_img_ids.map((item,index)=>( 
                                                                    <div>施工合同：
                                                                        <a href={item.url} style={{display:'block',height:'20px'}}>{item.name}</a>
                                                                    </div>
                                                                    
                                                                )):null}
                                                            </p>
                                                            <p>
                                                                {record.after_infrastructure_img_ids?
                                                                record.after_infrastructure_img_ids.map((item,index)=>(
                                                                    <div>基建图片：
                                                                        <Image src={item.url} style={{margin:0}} width={20}  />
                                                                    </div>
                                                                )):null}
                                                            </p>
                                                        </div>
                                            }}
                                        />
                                        <Column title="变更时间" dataIndex="opt_time" width='150px' key='3' />
                                        <Column title="变更用户" dataIndex="opt_user" width='100px' key='4' />
                                    
                                    </Table>
                                </Col>
                            </Row>
                            
                        </TabPane>
                        <TabPane tab={<span className="tabTit">项目状态</span>} key="2">
                            <Row className="process">
                                <Timeline>
                                    <Timeline.Item   color={activePro==1?'blue':'gray'}>
                                        <p>厂区建设阶段{activeChange==1 || (status==1|| status == 2 || status == 3) || apply_type==2 ?null:<button  className="infoPro" onClick={this.changeInfo.bind(this,1)}>信息维护</button>}</p>
                                        
                                            {
                                                activeChange==1?
                                                <div>
                                                    <h4>照片采集：</h4>
                                                    <div className="imgBox" >
                                                        <Upload
                                                            // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                                                            customRequest={this.uploadHeadImg.bind(this)}
                                                            listType="picture-card"
                                                            showUploadList={{ showRemoveIcon: true }}
                                                            fileList={fileList}
                                                            onRemove={this.removefile}
                                                            onPreview={this.handlePreview.bind(this)}
                                                            // onChange={this.handleChange.bind(this)}
                                                            >
                                                            {fileList&&fileList.length >= 10 ? null : uploadButton}
                                                        </Upload>
                                                        <span className="defaultTip">
                                                        可上传厂区基建中或基建完成的现场图片
                                                        </span>
                                                    </div>
                                                    <div style={{width:'100%',display:'inline-flex'}}>
                                                        <Button style={{marginLeft:'200px',padding:'10px',lineHeight:'3px'}} onClick={()=>{this.setState({activeChange:0})}} type="primary">取消</Button>
                                                        <Button style={{marginLeft:'20px',padding:'10px',lineHeight:'3px'}} onClick={this.saveUpd.bind(this)} type="primary">维护完成</Button>
                                                    </div>
                                                </div>
                                                :
                                                <div>
                                                    <h4>照片采集：</h4>
                                                    <div className="imgBox">
                                                    {
                                                        processData.infrastructure_img_ids && processData.infrastructure_img_ids.map((item,index)=>(
                                                            <Image
                                                                width={100}
                                                                src={item.url}
                                                            />
                                                        ))
                                                    }
                                                       
                                                    
                                                    </div>
                                                </div>
                                            }
                                        
                                
                                    </Timeline.Item>
                                    <Timeline.Item color={activePro==2?'blue':'gray'}>
                                        <p>道闸施工阶段{activeChange==2 || (status==1|| status == 2 || status == 3) || apply_type==2 ?null:<button  className="infoPro" onClick={this.changeInfo.bind(this,2)}>信息维护</button>}</p>
                                        {activeChange==2?
                                            <div>
                                                <h4 style={{height:'45px'}}>
                                               {
                                                   (start_time || end_time) == ''?
                                                    <RangePicker
                                                        onChange={this.onChangeDate.bind(this)}
                                                        placeholder={["开始时间", "结束时间"]}
                                                        // defaultValue={[moment(start_time, "YYYY-MM-DD HH:mm:ss"), moment(end_time, "YYYY-MM-DD HH:mm:ss")]}
                                                        showTime={{
                                                            hideDisabledOptions: true,
                                                            defaultValue: [
                                                            moment("00:00:00", "YYYY-MM-DD HH:mm:ss"),
                                                            moment("11:59:59", "YYYY-MM-DD HH:mm:ss"),
                                                            ],
                                                        }}
                                                        format="YYYY-MM-DD HH:mm:ss"
                                                        />
                                                    :
                                                    <RangePicker
                                                    onChange={this.onChangeDate.bind(this)}
                                                    placeholder={["开始时间", "结束时间"]}
                                                    defaultValue={[moment(start_time, "YYYY-MM-DD HH:mm:ss"), moment(end_time, "YYYY-MM-DD HH:mm:ss")]}
                                                    showTime={{
                                                        hideDisabledOptions: true,
                                                        defaultValue: [
                                                        moment("00:00:00", "YYYY-MM-DD HH:mm:ss"),
                                                        moment("11:59:59", "YYYY-MM-DD HH:mm:ss"),
                                                        ],
                                                    }}
                                                    format="YYYY-MM-DD HH:mm:ss"
                                                    />

                                               }
                                                
                                                </h4>
                                                <h4 className="spaninner">施工合同：
                                                
                                                </h4>
                                                <Upload
                                                    customRequest={this.uploadHeadImg2.bind(this)}
                                                    beforeUpload={this.beforeUpload2.bind(this)}
                                                    showUploadList={{ showRemoveIcon: true }}
                                                    fileList={fileList2}
                                                    onRemove={this.removefile2}
                                                    >
                                                    <Button
                                                        style={{ display: "inline-block", width: "100px" }}
                                                        icon={<UploadOutlined />}
                                                    >
                                                        附件上传
                                                    </Button>
                                                </Upload>
                                            <h4 className="spaninner">照片采集：</h4>
                                                <div className="imgBox">
                                                <Upload
                                                    // action={`${process.env.API_URL}/internal_public/attach/fileUpload`}
                                                    customRequest={this.uploadHeadImg3.bind(this)}
                                                    listType="picture-card"
                                                    showUploadList={{ showRemoveIcon: true }}
                                                    fileList={fileList3}
                                                    onRemove={this.removefile3}   
                                                    onPreview={this.handlePreview3.bind(this)}
                                                    // onChange={this.handleChange.bind(this)}
                                                    >
                                                    {fileList3&&fileList3.length >= 10 ? null : uploadButton}
                                                </Upload>
                                                </div>
                                                <div style={{width:'100%',display:'inline-flex'}}>
                                                        <Button style={{marginLeft:'200px',padding:'10px',lineHeight:'3px'}} onClick={()=>{this.setState({activeChange:0})}} type="primary">取消</Button>
                                                        <Button style={{marginLeft:'20px',padding:'10px',lineHeight:'3px'}} onClick={this.saveUpd.bind(this)} type="primary">维护完成</Button>
                                                    </div>
                                            </div>  
                                             :
                                            <div>
                                                <h4>{processData.construct_start_time}--{processData.construct_end_time}</h4>
                                                <h4>施工合同：
                                                    {processData.construct_contract_img_ids&&processData.construct_contract_img_ids.map((item,index)=>(
                                                        <a style={{display:'inline-block',marginRight:'10px'}} href={item.url}>{item.name}</a>
                                                    ))}
                                                </h4>
                                                <h4>照片采集：</h4>
                                                    <div className="imgBox">
                                                    {
                                                        processData.collect_img_ids && processData.collect_img_ids.map((item,index)=>(
                                                            <Image
                                                                width={100}
                                                                src={item.url}
                                                            />
                                                        ))
                                                    }
                                                    </div>
                                            </div> 
                                    }
                                    </Timeline.Item>
                                    <Timeline.Item color={activePro==3?'blue':'gray'}>
                                        <p>软件开发调试阶段{activeChange==3  || (status==1|| status == 2 || status == 3) || apply_type==2?null:<button className="infoPro" onClick={this.changeInfo.bind(this,3)}>信息维护</button>}</p>
                                    
                                        {activeChange == 3?
                                        <div style={{height:'120px'}}>
                                            <div style={{height:'60px'}}>
                                                {
                                                    (start_time_dev || end_time_dev)  == ''?
                                                    <RangePicker
                                                        onChange={this.onChangeDate2.bind(this)}
                                                        placeholder={["开始时间", "结束时间"]}
                                                        //value={RangePickerVal2}
                                                        //defaultValue={  [moment(start_time_dev, "YYYY-MM-DD HH:mm:ss"), moment(end_time_dev, "YYYY-MM-DD HH:mm:ss")]   }
                                                        showTime={{
                                                            hideDisabledOptions: true,
                                                            defaultValue: [
                                                            moment("00:00:00", "HH:mm:ss"),
                                                            moment("11:59:59", "HH:mm:ss"),
                                                            ],
                                                        }}
                                                        format="YYYY-MM-DD HH:mm:ss"
                                                        />

                                                    :
                                                    <RangePicker
                                                    onChange={this.onChangeDate2.bind(this)}
                                                    placeholder={["开始时间", "结束时间"]}
                                                    //value={RangePickerVal2}
                                                    defaultValue={  [moment(start_time_dev, "YYYY-MM-DD HH:mm:ss"), moment(end_time_dev, "YYYY-MM-DD HH:mm:ss")]   }
                                                    showTime={{
                                                        hideDisabledOptions: true,
                                                        defaultValue: [
                                                        moment("00:00:00", "HH:mm:ss"),
                                                        moment("11:59:59", "HH:mm:ss"),
                                                        ],
                                                    }}
                                                    format="YYYY-MM-DD HH:mm:ss"
                                                    />
                                                }
                                            

                                            </div>
                                                <div style={{width:'100%',display:'inline-flex'}}>
                                                    <Button style={{marginLeft:'200px',padding:'10px',lineHeight:'3px'}} onClick={()=>{this.setState({activeChange:0})}} type="primary">取消</Button>
                                                    <Button style={{marginLeft:'20px',padding:'10px',lineHeight:'3px'}} onClick={this.saveUpd.bind(this)} type="primary">维护完成</Button>
                                                </div>
                                        </div>
                                        :<h4>{processData.software_dev_start_time}--{processData.software_dev_end_time}</h4>

                                    }
                                    </Timeline.Item>
                                    <Timeline.Item color={activePro==4?'blue':'gray'}>
                                    <p>维保中{activeChange==4  || (status==1|| status == 2 || status == 3) || apply_type==2?null:<button className="infoPro"  onClick={this.changeInfo.bind(this,4)}>信息维护</button>}</p>
                                    {
                                        activeChange==4?
                                        <div style={{height:'120px'}}>
                                            <span className="spaninner">
                                            结束时间：
                                            </span>
                                            <Form
                                                ref={this.FormDate}
                                                name="basic"
                                                labelCol={{ span: 4 }}
                                                wrapperCol={{ span: 14 }}
                                                initialValues={{ 
                                                maintenance_end_date: maintenance_end_date ? moment(maintenance_end_date) : "",
                                                }}
                                                
                                                
                                            >
                                                <Form.Item label="维保结束时间：" name="maintenance_end_date">
                                                <DatePicker onChange={this.onChangeEnd.bind(this)} />
                                                </Form.Item>
                                            </Form>
                                            
                                            <div style={{width:'100%',display:'inline-flex',marginTop:'25px'}}>
                                                <Button style={{marginLeft:'200px',padding:'10px',lineHeight:'3px'}} onClick={()=>{this.setState({activeChange:0})}} type="primary">取消</Button>
                                                <Button style={{marginLeft:'20px',padding:'10px',lineHeight:'3px'}} onClick={this.saveUpd.bind(this)} type="primary">维护完成</Button>
                                            </div>
                                        </div>
                                        :
                                        <h4>维保结束时间：{processData.maintenance_end_date}</h4>
                                    }
                                    </Timeline.Item>
                                    <Timeline.Item color={activePro==5?'blue':'gray'}>
                                    <p>服务到期</p>
                                    
                                    </Timeline.Item>
                                    
                                </Timeline>
                            </Row>
                        </TabPane>
                        <TabPane tab={<span className="tabTit">设备配置</span>} key="3">
                            <Row>
                                <Col span={24}> 
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span className="tablename">项目设备配置</span>
                                        <span className="upload" onClick={this.erportBtnDan.bind(this)}>
                                            <CloudDownloadOutlined />
                                            设备清单下载
                                        </span>
                                    </div>
                                    <Table dataSource={threedata} pagination={false} style={{width:'100%'}}>
                                        <Column title="序号" dataIndex="" width='150px' key='1' 
                                            render={(text,record,index)=>`${index+1}`}
                                        />
                                        <Column title="设备名称" dataIndex="eq_name" width='150px' key='2' />
                                        <Column title="数量" dataIndex="eq_count" width='150px' key='3' />
                                        <Column title="型号" dataIndex="eq_model" width='150px' key='4' 
                                            render={(text,record,index)=>{
                                                return <span>{record.eq_model}---{record.spec_value}</span>
                                            }}
                                        />
                                    
                                    </Table>
                                </Col>
                        
                            </Row>
                            <Row>
                                
                                <Col span={24}>
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span>站台自有设备</span>
                                    </div>
                                    <Table dataSource={threedataSelf} pagination={false}>
                                        <Column title="序号" dataIndex="" width='150px' key='1' 
                                            render={(text,record,index)=>`${index+1}`}
                                        />
                                        <Column title="设备名称" dataIndex="eq_name" width='150px' key='2' />
                                        <Column title="数量" dataIndex="eq_count" width='150px' key='3' />
                                        <Column title="品牌" dataIndex="eq_brand_name" width='150px' key='4' />
                                        <Column title="照片" dataIndex="eq_img_ids" width='150px' key='5' 
                                            render={(text, record) => (
                                                <Row>
                                                    {
                                                        record.eq_img_ids && record.eq_img_ids.map((item,index)=>(
                                                            <Image
                                                                width={30}
                                                                src={item}
                                                            />
                                                        ))
                                                    }
                                                </Row>
                                            )}
                                        />
                                        
                                    </Table>
                                </Col>
                            </Row>
                            <Row>
                                
                                <div className="tipss">
                                    <span className="blue"></span>
                                    <span>SAAS服务配置</span>
                                </div>
                                <div className="saasDetail">
                                    <p>
                                        <span>账号数：</span>
                                        <span>{saasData.limit == '2'?'不限':saasData.count}</span>
                                    </p>
                                    <p>
                                        <span>软件功能：</span>
                                        <span>{saasData.menu_str}</span>
                                    </p>
                                </div>
                            </Row>
                        </TabPane>
                    </Tabs>
                    </Col>
                   
                   
                </Row>
                {this.getUrlSearch('type')&&this.getUrlSearch('type')==2&&this.getUrlSearch('state') == 1?<Row>
                        <Col span={24} style={{textAlign:'center'}}>
                            <Button style={{width:'120px',padding:'10px',lineHeight:'3px',marginRight:'20px'}} onClick={this.toDoDecRefuse.bind(this)} >
                                拒绝
                            </Button>
                            <Button onClick={this.toDoDec.bind(this)} style={{width:'120px',padding:'10px',lineHeight:'3px',}} type="primary" >
                                通过
                            </Button>
                        </Col>
                    </Row>:null}
            </Row>
        )
    }
}

export default programConfigDetail;